const { resolve } = require('path')
const HtmlPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
module.exports = {
  entry: './src/index.js', // 这个入口的路径相对的是执行指令的命令行的路径
  output: {
    filename: './js/build.js',
    path: resolve(__dirname, '../build'),
    clean: true,
    publicPath: '/', //将引入build.js的路径由默认的./js/build.js 改为 /js/build.js
  },
  mode: 'production',
  plugins: [
    new HtmlPlugin({
      template: './public/index.html',
    }),
    new CopyPlugin({
      patterns: [
        {
          from: 'public', //表示复制public下面的所有文件
          to: resolve(__dirname, '../build'), //表示将复制好的文件粘贴到build文件夹中
          globOptions: {
            // htmlplug已经处理过index.html了. copyplug不要再处理index.html,否则无法打包
            ignore: ['**/index.html'],
          },
        },
      ],
    }),
  ],
  module: {
    rules: [
      {
        test: /\.ejs$/,
        loader: 'ejs-loader',
        options: {
          variable: 'data', // 可以在模板当中使用 data 进行动态渲染. 这个值可以自定义.比如:xxx
          // interpolate: '\\{\\{(.+?)\\}\\}', // 表示使用 {{}} 语法. 我们这里不需要
        },
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.json', '.ejs'], // 尝试按顺序解析这些后缀名。如果有多个文件有相同的名字，但后缀名不同，webpack 会解析列在数组首位的后缀的文件 并跳过其余的后缀。
    // 配置别名
    alias: {
      v: resolve(__dirname, '../src/view'),
    },
  },
}
